<template>
  <div>
    <van-cell
      @click="showPopup"
      style="display: inline-block; font-size: 0.42rem width:auto;height:auto"
    >
      <van-icon
        name="wap-nav"
        style="
          display: inline-block;
          margin-right: 0.22rem;
          font-size: 0.42rem;
        "
    /></van-cell>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
    >
      <div class="sidebar">
        <div class="user">
          <div class="top">
            <div class="left" @click="login()">
              <img :src="headerArr.headurl" alt="" />
              <span>{{ headerArr.username }}</span>
              <i class="iconfont icon-youhuaxiangyougengduo"></i>
            </div>
            <div class="right">
              <i class="iconfont icon-saoma1"></i>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-top">
              <div class="left">
                <h2>续费黑胶VIP</h2>
                <span>立享超21项专属特权</span>
              </div>
              <div class="right">
                <p>会员中心</p>
              </div>
            </div>
            <div class="bottom-bottom">
              <span>专享特惠，黑胶首月仅1.93元!</span>
              <p>限时<br />福利</p>
            </div>
          </div>
        </div>
        <div class="component" v-for="v in contentArr" :key="v.contentid">
          <div v-if="v.title !== ''" class="title">{{ v.title }}</div>
          <div class="function" v-for="(k, i) in v.content" :key="i">
            <div class="left">
              <i :class="k.oneclass"></i>
              <span>{{ k.span }}</span>
            </div>
            <div class="right">
              <p v-if="k.p !== ''">{{ k.p }}</p>
              <img v-if="k.img !== ''" :src="k.img" alt="" />
              <em :class="k.twoclass"></em>
            </div>
          </div>
        </div>
        <button>退出云音乐</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerArr: {
        headurl: "/img/wallhaven-rdyezm_看图王.jpg",
        username: "邓紫棋的头号粉丝",
        userid: 10000,
      },
      contentArr: [
        {
          contentid: 10086,
          title: "",
          content: [
            {
              oneclass: "iconfont icon-duanxin",
              span: "我的消息",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-duanxin",
              span: "云贝中心",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-piaoicon-chuangzuozhe",
              span: "创作者中心",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 10087,
          title: "音乐服务",
          content: [
            {
              oneclass: "iconfont icon-piao",
              span: "云村有票",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-gouwuche",
              span: "商城",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-cailing",
              span: "游戏专区",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-cailing",
              span: "口袋彩铃",
              p: "音乐和奶茶更配哦",
              img: "/img/wallhaven-rdyezm_看图王.jpg",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 10088,
          title: "其他",
          content: [
            {
              oneclass: "iconfont icon-shezhi",
              span: "设置",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-yueliang",
              span: "夜间模式",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-danchuang_dingshiguanbi_",
              span: "定时关闭",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-gexingzhuangban1",
              span: "个性装扮",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-kefu",
              span: "边听边存",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-zaixiantinggemianliuliang",
              span: "在线听歌免流量",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-Shape",
              span: "音乐黑名单",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-anquan1",
              span: "青少年模式",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-yinlenaozhong",
              span: "音乐闹钟",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
        {
          contentid: 10087,
          title: "",
          content: [
            {
              oneclass: "iconfont icon-dingdan",
              span: "我的订单",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-youhuiquan",
              span: "优惠券",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-kefu",
              span: "我的客服",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-fenxiang",
              span: "分享网易云音乐",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
            {
              oneclass: "iconfont icon-guanyuwomen",
              span: "关于",
              p: "",
              img: "",
              twoclass: "iconfont icon-youhuaxiangyougengduo",
            },
          ],
        },
      ],
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    login() {
      this.$router.push("/loginview");
    },
  },
};
</script>

<style lang="less" scoped>
.van-cell__value {
  overflow: visible;
  z-index: 2000;
}
.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: auto;
  padding: 0;
  overflow: visible;
  color: #323233;
  font-size: 0.42rem;
  line-height: 24px;
  background-color: #e7e3e4;
}
.sidebar {
  width: 100%;
  padding: 0.3rem 0.3rem 0.55rem;
  background-color: #f6f6f6;
  /*隐藏滚动条*/
  ::-webkit-scrollbar {
    display: none;
  }
  button {
    width: 100%;
    border-radius: 0.2rem;
    height: 1rem;
    font-size: 0.26rem;
    color: #d21f2d;
    border: 0;
    background-color: #fffffe;
  }
  .user {
    width: 100%;
    margin-bottom: 0.3rem;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.42rem;
      .left {
        line-height: 0.55rem;
        display: flex;
        img {
          width: 0.55rem;
          height: 0.55rem;
          margin-right: 0.2rem;
          vertical-align: middle;
          border-radius: 50%;
        }
        span {
          vertical-align: middle;
          font-size: 0.26rem;
          margin-right: 0.12rem;
        }
        i {
          font-size: 0.23rem;
        }
      }
      .right {
        i {
          font-size: 0.4rem;
          line-height: 0.55rem;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 2.15rem;
      border-radius: 0.28rem;
      background-color: #8c8a8f;
      padding: 0.25rem 0.3rem;
      color: #fff;
      span {
        font-size: 0.18rem;
        color: #cdcdcb;
      }
      .bottom-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left {
          padding-bottom: 0.28rem;
          border-bottom: 0.01rem solid #cdcdcb;
          h2 {
            font-size: 0.32rem;
            font-weight: 700;
            margin-bottom: 0.18rem;
          }
        }

        .right {
          p {
            width: 1.22rem;
            height: 0.55rem;
            border-radius: 0.2rem;
            border: 0.02rem solid #cdcdcb;
            padding: 0.1rem 0.15rem;
          }
        }
      }
      .bottom-bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        span {
          margin-top: 0.2rem;
        }
        p {
          width: 0.4rem;
          height: 0.4rem;
          font-size: 0.13rem;
          font-style: oblique;
          font-weight: 700;
          padding-top: 0.01rem;
          padding-left: 0.05rem;
          border-radius: 0.05rem;
          background-image: linear-gradient(to bottom, #3289fc, #8cd3f5);
        }
      }
    }
  }
  .component {
    width: 100%;
    padding: 0 0 0 0.15rem;
    border-radius: 0.15rem;
    background-color: #fff;
    margin-bottom: 0.25rem;
    .title {
      padding: 0.3rem 0 0.25rem 0.2rem;
      border-bottom: 0.01rem solid #eee;
      font-size: 0.2rem;
    }
    .function {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.3rem 0.3rem 0.3rem 0.2rem;
  height: 0.95rem;
  line-height: 0.3rem;
  .left {
    display: flex;
    color: #000;
    i {
      font-size: 0.3rem;
      margin-right: 0.25rem;
    }
    span {
      font-size: 0.26rem;
    }
  }
  .right {
    display: flex;
    p {
      font-size: 0.18rem;
      color: #9f9f9f;
    }
    img {
      width: 0.45rem;
      height: 0.45rem;
      margin-left: 0.15rem;
      border-radius: 50%;
    }
    em {
      font-size: 0.25rem;
      margin-left: 0.15rem;
    }
  }
}
  }
}
</style>